<script >
import {defineComponent, toRefs, reactive, onMounted} from 'vue';
import Sidebar from '../common/Sidebar.vue';
import Header from '../common/Header.vue';
import axios from 'axios';
import hotel from "@/views/hotel/Hotel.vue";
import {Plus, Search} from "@element-plus/icons-vue"; // 引入axios库

export default defineComponent({
  name: "Hotel",
  computed: {
    Search() {
      return Search
    }
  },
  components: {
    Plus,
    Sidebar,
    Header,
  },
  data() {
    return {
      editingHotelRow: null,
      hotelList : [],//酒店列表
      searchQuery: '',
    }
  },
  watch: {
    // 监听searchQuery的变化
    searchQuery(newValue, oldValue) {
      // 当searchQuery的值变化时，调用这个函数
      // 你可以在这里执行任何你需要的逻辑
      this.searchHotel(newValue);

    },
  },
  mounted() {
    // 在组件挂载时发送请求获取商品信息
    this.fetchHotels();
  },
  methods:{
    async searchHotel(keyword){
      await axios.get(`http://localhost:8082/searchHotelByName?keyword=${keyword}`).then(response => {
        this.hotelList = response.data;

      });
    },
    async deleteHotel(id){
      await axios.post(`http://localhost:8082/deleteHotel`,{
        id:id,
      },{
        headers: {
          'Content-Type':'application/json',
        },
      });
      this.fetchHotels();
    },

    addRow() {
      const newRow = {
        id: parseInt(this.hotelList[this.hotelList.length-1].id)+1,// 根据实际情况，可能需要生成一个唯一的ID
        name: '空',
        maxcapacity: '0',
        maxparking: '0',
        maxcheck:'0',
        location: '空',
        information: '空',
        score:'60',
      };
      this.hotelList.push(newRow);
      this.editingHotelRow = this.hotelList.length-1;
      axios.post(`http://localhost:8082/insertHotel`, {
        id: newRow.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },

    handleHotelEdit(index) {
      this.editingHotelRow = index;
    },

    async handleHotelEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingHotelRow = null;
      await axios.post("http://localhost:8082/updateData", {id: this.hotelList[index].id,
        name: this.hotelList[index].name,
        location:this.hotelList[index].location,
        information:this.hotelList[index].information,
        maxcapacity:this.hotelList[index].maxcapacity,
        maxparking:this.hotelList[index].maxparking,
        maxcheck:this.hotelList[index].maxcheck,
        score:this.hotelList[index].score,
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('景区信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新景区信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });
    },

    viewHotel(id) {
      this.$router.push(`/hotel/detailHotel/${id}`);
    },
    fetchHotels() {

      axios.get('http://localhost:8082/Hotel') // 根据实际情况修改接口地址
          .then(response => {
            this.hotelList = response.data;
            console.log(this.hotelList);
          })
          .catch(error => {
            console.error('获取酒店列表失败:', error);
          });
    },
  },
})

</script>

<template>
  <body>
  <el-col style="height: 100%;">
    <Header />
    <el-row style="height: 100%;">
      <el-col :span="3" style="height: 100%;">
        <Sidebar />
      </el-col>
      <el-col :span="21" style="height: 100%; text-align: center;overflow-y: auto;" >
        <div class="background-image">
          <h1 style="display: flex;justify-content: center">所有酒店</h1>
          <el-card >
            <el-input type="text" v-model="searchQuery" placeholder="输入名称" style="width: 300px " :suffix-icon="Search"></el-input>
        <el-table v-if="hotelList.length > 0" :data="hotelList" stripe height="250" style="width: 100%">

          <el-table-column fixed prop="id" label="酒店编号" width="150" align="center"/>
          <el-table-column prop="name" label="酒店名称" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHotelRow === scope.$index" v-model="scope.row.name" @blur="handleHotelEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHotelEdit(scope.$index)">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maxcapacity" label="最大客流量" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHotelRow === scope.$index" v-model="scope.row.maxcapacity" @blur="handleHotelEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHotelEdit(scope.$index)">
                {{ scope.row.maxcapacity }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maxparking" label="车位总数" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHotelRow === scope.$index" v-model="scope.row.maxparking" @blur="handleHotelEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHotelEdit(scope.$index)">
                {{ scope.row.maxparking }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maxcheck" label="房间总数" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHotelRow === scope.$index" v-model="scope.row.maxcheck" @blur="handleHotelEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHotelEdit(scope.$index)">
                {{ scope.row.maxcheck }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="地点" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHotelRow === scope.$index" v-model="scope.row.location" @blur="handleHotelEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHotelEdit(scope.$index)">
                {{ scope.row.location }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="information" label="详细信息" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHotelRow === scope.$index" v-model="scope.row.information" @blur="handleHotelEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHotelEdit(scope.$index)">
                {{ scope.row.information }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="信誉分" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingHotelRow === scope.$index" v-model="scope.row.score" @blur="handleHotelEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleHotelEdit(scope.$index)">
                {{ scope.row.score }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button link type="primary" @click="viewHotel(scope.row.id)">详情</el-button>
              <el-button link type="primary" @click="deleteHotel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
            <template #footer><el-button color="#9d2933" circle size="large" plain @click="addRow"><el-icon><plus/></el-icon></el-button></template>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </el-col>
  </body>
</template>

<style scoped>
@import "../../assets/css/global.css";
.background-image {
  height: 100vh; /* 使容器高度占满视口 */
  display: flex; /* 使用 flexbox 居中内容 */
  flex-direction: column;
  align-items: center;
  background-image: url('/bg1.png');
  background-size: cover; /* 覆盖整个容器 */
  background-position: center; /* 图片居中 */
}
</style>